<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello Vue</title>
</head>
<body>
<div id="app">
    <!-- 计算属性的使用我们都知道了，根据之前我们写的实现模式中，我们把计算属性改成方法实现也是可以实现同样的效果 -->
    <h1>{{name3}}</h1>
    <h1>{{getName3()}}</h1>
    <!-- 但是两个又有什么不同的地方，两者之间最大的区别就是：缓存。
     计算属性是基于它们的响应式依赖进行缓存，只有相关响应式依赖发生改变时才会重新计算值。其他时候都是直接返回的，不需要在次计算，就是name1和name2初始化之后，没有改变的话，你使用n次name3，name3都只会执行一次
     方法是每次你使用getName3()，都会执行一次，如果你的一个属性使用很频繁，而且运算量很大，这次你用方法就有一个问题，就是性能开销特别大，但是界面出现卡顿的现象
     两者之前的使用，都是开具体需要决定的，你不想缓存起来就用方法，想缓存起来就用计算属性
     -->
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{name3}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
    <h1>{{getName3()}}</h1>
</div>
</body>
<script src="../css/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            name1: "hello",
            name2: "Vue"
        },
        computed:{
            name3 : function () {
                console.log("使用计算属性computed")
                return this.name1 + ' ' + this.name2;
            }
        },
        methods:{
            getName3: function () {
                console.log("使用方法methods")
                return this.name1 + ' ' + this.name2;
            }
        }
    });
</script>
</html>
